<template>
	<view class="delicious">
		<!-- <Header @back = "back" left-icon="back" left-text="" right-text="" title="美食"></Header> -->
		<view class="content">
			<view class="deliciousContent">
				<view class="deliciousMain">
					<image style="width: 100%;" class="img" :src="foodData.otherImage"></image>
					<view class="deliciousName">
						{{foodData.title}}
					</view>
					<!-- <view class="deliciousTagBox">
						<view class="deliciousTag" v-for="(item, _index2) in foodData.labels" v-if="item != ''" :key="_index2">
							{{item}}
						</view>
					</view> -->
					<view class="deliciousSign">
						<!-- <view class="deliciousLable">推荐餐厅：</view> -->
						<view class="">{{foodData.digest}}</view>
					</view>
				</view>
				<view class="deliciousList">
					<view class="deliciousListLable">
						美食推荐
					</view>
					<view class="deliciousListItem" v-for="(item, _index) in resDate" :key="_index" @click="goDetail(item)">
						<view class="deliciousListImg">
							<image style="height: 100%;width: 100%;" class="img" :src="item.img"></image>
						</view>
						<view class="deliciousListRight">
							<view class="deliciousListLableName">
								{{item.name}}
							</view>
							<view class="deliciousListPopular">
								<view class="deliciousPegeviews">
									<view class="deliciousLable">{{item.pageviews}}</view>
									<view class="">浏览</view>
								</view>
								<view class="deliciousRecommend">
									<view class="deliciousLable">{{item.recommendNum}}</view>
									<view class="">人推荐</view>
								</view>
							</view>
							<view class="deliciousRustrount elip">
								推荐餐厅:
								{{item.recommendRestaurant}}
							</view>
							<view class="deliciousListTag">
								<view class="deliciousListTagItem" v-for="(child, _index1) in item.promptLabel" v-if="child != ''" :key="_index1">
									{{child}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="fz14 tc h-8 signtips">{{tips}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header.vue'
	export default {
		onLoad: function(option) {
			if(!option.id){
				this.parentDate = JSON.parse(decodeURIComponent(option.item))
				if(this.parentDate.img){
					this.parentDate.img = this.pub.fmtImgUrl(this.parentDate.img)
				}else{
					this.parentDate.img = this.pub.fmtImgUrl(this.parentDate.variousImg)
				}
				if(this.parentDate.name){
					this.parentDate.name = this.pub.fmtImgUrl(this.parentDate.name)
				}else{
					this.parentDate.name = this.pub.fmtImgUrl(this.parentDate.variousName)
				}
			}else{
				this.parentDate.id = option.id
			}
			this.getFoodList()
			this.getData();
		},
		data() {
			return {
				foodData:{},
				parentDate: {},
				resDate: '',
				page: 1,
				tips: '正在加载...',
				isOnReachBottom: false
			}
		},
		components: {
			Header
		},
		onReachBottom: function() {
			this.page++
			if (this.isOnReachBottom) {
				this.getData()
			}
		},
		onShow() {
			//#ifdef H5
			document.title = '美食详情'
			//#endif
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			getFoodList:function(){
				this.$postApi(this.$path.GET_NEW_DESTINATION_FOODS, {
					id: this.parentDate.id,
				}).then(data => {
					if (data.data.success) {
						console.log("????????????",data.data.data)
						this.foodData = data.data.data
					}
					console.log("this.foodData>>>>>>>>>>>>>",this.foodData)
				})
			},
			//获取数据
			getData() {
				this.$postApi(this.$path.GET_FOODDESHES_EXCLUDE_BY_ID, {
					id: this.parentDate.id,
					name: '',
					ownRestaurant: '',
					page: this.page,
					rows: 4,
					// restauranAddress: "兰州市",
					type: '1'
				}).then(data => {
					// 					console.log(data, '获取数据')
					// 					
					// 					this.resDate = data.data.rows
					// 					console.log(this.resDate)
					if (data.data.success) {
						if (data.data.rows.length !== 0) {
							for (let i = 0; i < data.data.rows.length; i++) {
								data.data.rows[i].img = this.pub.fmtImgUrl(data.data.rows[i].img);
								data.data.rows[i].promptLabel = data.data.rows[i].promptLabel.split("；");
							}
							if (this.page == 1) {
								this.resDate = []
							}
							this.tips = ''
							this.isOnReachBottom = true
							this.resDate = this.resDate.concat(data.data.rows)
						} else {
							this.tips = '没有更多数据了'
							this.isOnReachBottom = false
						}
					}
				})
			},
			goDetail(item) {
				this.parentDate = item
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 10
				});
				this.page = 1
				this.getData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.deliciousContent {
		// padding-top: 44px;
		background: rgba(245, 245, 245, 1);

		.signtips {
			padding: 16upx 25px 25px;
		}

		.deliciousMain {
			background: rgba(255, 255, 255, 1);

			.deliciousName {
				font-size: 42upx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				text-align: center;
				margin: 30upx auto;
			}

			.deliciousTagBox {
				display: flex;
				justify-content: space-around;

				.deliciousTag {
					border: 1upx solid rgba(254, 90, 52, 1);
					border-radius: 4upx;
					padding: 9upx;
					font-size: 28upx;
					font-weight: 400;
					color: rgba(254, 90, 52, 1);
				}
			}

			.deliciousSign {
				display: flex;
				padding: 47upx;
				font-size: 30upx;

				.deliciousLable {
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
				}
			}
		}

		.deliciousList {
			background: rgba(255, 255, 255, 1);
			margin-top: 20upx;

			.deliciousListLable {
				padding-top: 50upx;
				font-size: 42upx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-left: 48upx;
			}

			.deliciousListItem {
				// width: 100%;
				display: flex;
				// flex-direction: column;
				margin: 34upx;
				// padding: 0upx 34upx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 3px 20px 0px rgba(140, 140, 140, 0.26);
				border-radius: 10upx;
				height: 235upx;
				box-sizing: border-box;

				.deliciousListImg {
					flex-shrink: 0;
					width: 282upx;
					height: 235upx;
				}

				.deliciousListRight {
					display: flex;
					flex-direction: column;
					margin-left: 37upx;

					.deliciousListLableName {
						font-size: 36upx;
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
						margin: 20upx 0 15upx 0;
					}

					.deliciousListPopular {
						display: flex;
						font-size: 28upx;
						margin-bottom: 15upx;
						// font-weight: bold;
						color: rgba(70, 70, 70, 1);

						.deliciousPegeviews {
							display: flex;

							// font-size: 28upx;
							.deliciousLable {
								font-weight: bold;
								color: rgba(51, 51, 51, 1);
							}
						}

						.deliciousRecommend {
							margin-left: 18upx;
							display: flex;

							// font-size: 28upx;
							.deliciousLable {
								font-weight: bold;
								color: rgba(51, 51, 51, 1);
							}
						}
					}

					.deliciousRustrount {
						width:340upx;
						font-size: 30upx;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						margin-bottom: 15upx;
					}

					.elip {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						/* word-break:break-all; */
						word-wrap: break-word;
					}

					.deliciousListTag {
						display: flex;
						margin-bottom: 10upx;

						.deliciousListTagItem {
							border: 1upx solid rgba(255, 180, 21, 1);
							border-radius: 4upx;
							font-size: 24upx;
							font-weight: 400;
							color: rgba(255, 180, 21, 1);
							padding: 6upx 12upx;
							margin-right: 14upx;
						}
					}
				}

			}
		}
	}
</style>
